<template>

  <div class="lin_project_info">
    <div class="lin_project_info_list">
      <div class="lin_project_info_list_ack lin_display_flex_around lin_project_info_list_padding lin_project_info_list_media">
        <div class="lin_project_info_list_ack_title">
          <h2>Alibaba Kubernetes of ACK</h2>
          <span>An automated container system</span>
        </div>
        <div style="display: flex; flex-direction: column">
          <div>
            <a href="https://www.aliyun.com/product/kubernetes#introduction" target="_blank">
              <img src="/images/icons8-k8s-50.png" style="width: 48px;">
              <img src="/images/icons8-k8s-48.png">
            </a>
          </div>
          <div class="lin_project_info_list_ack_font">
            <span>
              ACK provides high-performance and scalable container application management capabilities,
              supporting full lifecycle management of enterprise level containerized applications.
            </span>
          </div>
          <div class="lin_project_info_list_ack_font_button">
            <nuxt-link to="/designer/work/kubernetes-of-ack">
              <el-button
                  size="small"
                  link
              >
                Read case study
                <el-icon class="lin_right_icon"><Right /></el-icon>
              </el-button>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="lin_project_info_list_blog lin_display_flex_around lin_project_info_list_padding lin_project_info_list_media">
        <div class="lin_project_info_list_blog_title">
          <h2>Latest from the blog</h2>
        </div>
        <div class="lin_project_info_list_blog_journal">
          <h4>Arriving to a new</h4>
          <h4>milestone in my career</h4>
          <span>April 8, 2024</span>
          <div>
            <el-button link>Journal<el-icon><Right /></el-icon></el-button>
          </div>
        </div>
        <div class="lin_project_info_list_blog_journal">
          <h4>The 99% that </h4>
          <h4>remains in the drawer</h4>
          <span>March 5, 2024</span>
          <div>
            <el-button link>Journal <el-icon><Right /></el-icon></el-button>
          </div>
        </div>
      </div>
      <div class="lin_project_info_list_blog_video lin_project_info_list_gsap">
        <div>
          <video src="/video/main_video.mp4" autoplay loop playsinline style="width: 100%; height: 100%; object-fit: cover; border-radius: 15px"></video>
        </div>
        <div>
          <h3 class="lin_project_info_list_blog_video_content">A simple personal blog built using FastApi and Next.js</h3>
        </div>
      </div>
      <div class="lin_project_info_list_blog_video lin_project_info_list_gsap">
        <div>
          <video src="/video/gsap-website.mp4" autoplay loop playsinline style="width: 100%; height: 100%; object-fit: cover; border-radius: 15px"></video>
        </div>
        <div>
          <h3 class="lin_project_info_list_blog_video_content">The first version of my personal blog built using Django and Next.js has been taken down</h3>
        </div>
      </div>
      <div>
        <Subscribe
            class="subscribe"
            style="display: flex; justify-content: center"
        />
      </div>
      <Footer/>
    </div>

  </div>

</template>

<script setup lang="ts">
import { Right } from '@element-plus/icons-vue';
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useWindowStore } from '~/stores/pinia/useWindowStore';
import {gsap} from 'gsap';
import Subscribe from "~/ components/main/Subscribe.vue";
import Footer from "~/ components/Footer.vue";
gsap.registerPlugin(ScrollTrigger);
const windowStore = useWindowStore();


const gsap_video = async() => {
  const elements = document.querySelectorAll('.lin_project_info_list_gsap')
  elements.forEach((element) => {
    gsap.fromTo(element, {
        y: 100,
        duration: 0.5,
        opacity: 0,
      },
      {
        y: 0,
        duration: 1,
        opacity: 1,
        scrollTrigger: {
          trigger: element,
          start: "top 80%",
          end: "top 30%",
          scrub: 1,
          toggleActions: "restart reverse none none",
          // markers: true,
        },
      })
  })
}

const gsap_subscribe = async() => {
  const elements = document.querySelectorAll('.subscribe')
  elements.forEach((element) => {
    gsap.fromTo(element, {
          y: 100,
          duration: 0.5,
          opacity: 0,
        },
        {
          y: 0,
          duration: 1,
          opacity: 1,
          scrollTrigger: {
            trigger: element,
            start: "top 80%",
            end: "top 50%",
            scrub: 1,
            toggleActions: "restart reverse none none",
            // markers: true,
          },
        })
  })
}


onMounted(async () => {
  await gsap_video()
  await gsap_subscribe()
})


</script>


<style scoped lang="scss">
* {
  font-family: 'Roboto', sans-serif, Helvetica, Arial, sans-serif;
}
.lin_project_info {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.lin_project_info_list {
  width: 60%;
  margin-top: 50px;
}

.lin_project_info_list_ack div {
  width: 260px;
}
.lin_project_info_list_padding {
  padding: 80px  0;
}


.lin_project_info_list_ack button:hover {
  color: var(--scheme-moss-800) ;
}

.lin_project_info_list_ack_font {
  font-size: 12px;
}
.lin_project_info_list_ack_font_button {
  padding: 5px 0;
}
.lin_project_info_list_blog button:hover {
  color: var(--scheme-red-100);
}

.lin_project_info_list_blog button{
  padding: 4px;
  border-radius: 11px;
  border: 1px solid black;
  margin-top: 10px;
}

.lin_project_info_list_blog_journal:hover {
  transform: translateX(10px);
  transition: all 0.5s ease;
}

.lin_project_info_list_blog_video {
  opacity: 0;
}

.lin_project_info_list_blog_video_content,
.lin_project_info_list_blog_video_content{
  padding: 50px 0;
  font-size: 20px;
}

.subscribe {
  opacity: 0;
  padding: 80px 0;
}

.lin_project_info_list_gsap {
  margin-bottom: 50px;
}

@media screen and (max-width: 860px) {
  .lin_project_info_list_media,
  .subscribe{
    font-size: 12px;
  }
  .lin_project_info_list_ack div {
    width: 220px;
    margin-right: 30px;
  }
}

@media screen and (max-width: 800px) {
  .lin_project_info_list_blog_video_content,
  .lin_project_info_list_blog_video_content{
    font-size: 15px;
  }
}

@media screen and (max-width: 450px) {
  .lin_project_info_list_ack_title,
  .lin_project_info_list_blog_title{
    opacity: 0;
    display: none;
    transform: translateX(-10px);
    transition: all 0.5s ease-in-out;
  }
}

@media screen and (max-width: 400px) {
  .lin_project_info_list_blog_video_content,
  .lin_project_info_list_blog_video_content,
  .subscribe{
    font-size: 10px;
  }

}

@media screen and (max-width: 290px) {
  .lin_project_info_list_ack div {
    width: 180px;
  }
  .subscribe {
    font-size: 8px;
  }
}

@media screen and (max-width: 230px) {
  .lin_project_info_list_ack div {
    width: 130px;
  }
  .lin_project_info_list_blog div {
    margin-right: 5px;
  }
  .subscribe {
    font-size: 6px;
  }
}

</style>